<template>
  <div class="chart-example">
    <div ref="chartContainer" class="chart-container"></div>
    <div v-if="loading" class="chart-loading">图表加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useECharts, chartPresets } from '@/composables/useECharts'

const chartContainer = ref<HTMLElement>()
const { chart, loading, initChart, updateChart } = useECharts(chartContainer)

// 模拟数据
const mockData = [
  { name: '深度溃疡', value: 15, percentage: 15 },
  { name: '表浅溃疡', value: 45, percentage: 45 },
  { name: '血管纹理', value: 30, percentage: 30 },
  { name: '正常黏膜', value: 10, percentage: 10 }
]

onMounted(async () => {
  if (chartContainer.value) {
    // 使用预设的环形图配置
    await initChart(chartPresets.confidenceRing(mockData))
  }
})
</script>

<style scoped>
.chart-example {
  width: 100%;
  height: 400px;
  position: relative;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--uc-text-secondary);
  font-size: 14px;
}
</style>